<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--数据双向绑定 单行文本-->
<div id="app">
    <input type="text" v-model="message" />文本 {{message}}
</div>
<!--textarea 多行文本-->
<div id="vue">
    多行文本：<textarea v-model="message"></textarea>&nbsp;&nbsp;
        多行文本内容：{{message}}
</div>
<div id="vue1">
    单复选框:<input type="checkbox" id="checkbox" v-model="checked">&nbsp;&nbsp;
    <!--for属性规定label与那个表单元素绑定-->
    <label for="checkbox">{{checked}}</label>
</div>

<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue"
        }
    });
</script>
<!-多行文本内容提-->
<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        data: {
            message: "Hello Textarea"
        }
    });
</script>

<script type="text/javascript">
    var vm = new Vue({
        el: "#vue1",
        data: {
            checked: false
        }
    });
</script>

</body>
</html>